import React from 'react';

import { Grid } from 'antd-mobile';

class AvatarSelector extends React.Component{
    constructor(props){
        super(props);

        this.select = this.select.bind(this);

        this.state = {
            selected: ''
        }
    }
    select(data){
        this.props.selectTx(data.text);
    }
    render(){
        const avs = [
            '1_0','1_1','1_2','1_5','1_6','1_7','1_8','1_9','1_dian','1_dian','1_dian','1_dian'
        ].map(k => {
            return {
                icon: require(`@/component/avatarselector/img/${k}.png`), // webpack require
                text: k
            }
        });
        return (<div>
            <img src={this.state.selected} alt="您选择的头像" />
            <div className="admin">
            <Grid data={avs} columnNum={4} onClick={
                (ele) => {
                    this.select(ele);
                    this.setState({
                        selected: ele.icon
                    })
                }
            } />
            </div>
        </div>)
    }
}

export default AvatarSelector;